<script lang="ts" setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'

// 文件下载
import downClient from '@/views/downFiles/downClient.vue'
// Import Swiper styles
import 'swiper/css'

import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { ref } from 'vue'
import { DemoApi, demoManual } from '@/api/demo'
import { Autoplay, Navigation, Pagination } from 'swiper/modules'

const modules = [Autoplay, Pagination, Navigation]


// 轮播图按钮
const text1 = ref('免费下载')
const text2 = ref('免费下载')
const text3 = ref('免费下载')
const text4 = ref('免费下载')
const conuts = ref(1)

const arrBtns = ref([
  text1, text2, text3, text4
])
// 下载
const downFiles = (data: any) => {
  console.log('data', data)
  const url = window.URL.createObjectURL(new Blob([data])) // 创建下载链接
  const link = document.createElement('a')
  link.href = url
  link.download = '客户端.exe' // 设置文件名
  document.body.appendChild(link)
  link.click() // 触发下载
  document.body.removeChild(link) // 下载后移除元素 src/types/api.d.ts
  arrBtns.value[conuts.value - 1].value = '免费下载'
}
// 更清晰的异步处理流程
const down = async (num: number): Promise<void> => {
  conuts.value = num
  console.log('123', arrBtns.value[num - 1].value);
  if (arrBtns.value[num - 1].value === '下载中...') {
    return
  }
  try {
    arrBtns.value[num - 1].value = '下载中...'
    const res = await DemoApi.test()
    console.log('响应数据', res)
    if (res) {
      downFiles(res)
    } else {
      alert('下载失败请重试!')
    }
  } catch (err) {
    arrBtns.value[num - 1].value = '免费下载'
    alert('下载失败请重试!')
    console.error('请求失败:', err)
  }
}


const textManual = ref('使用手册')
const arrBtnsManual = ref([
  textManual
])

// 下载
const downFilesManual = (data: any) => {
  console.log('data', data)
  const url = window.URL.createObjectURL(new Blob([data])) // 创建下载链接
  const link = document.createElement('a')
  link.href = url
  link.download = '使用手册.pdf' // 设置文件名
  document.body.appendChild(link)
  link.click() // 触发下载
  document.body.removeChild(link) // 下载后移除元素 src/types/api.d.ts
  arrBtnsManual.value[conuts.value - 1].value = '使用手册'
}
// 更清晰的异步处理流程
const down1 = async (num: number): Promise<void> => {
  conuts.value = num
  console.log('123', arrBtnsManual.value[num - 1].value);
  if (arrBtnsManual.value[num - 1].value === '下载中...') {
    return
  }
  try {
    arrBtnsManual.value[num - 1].value = '下载中...'
    const res = await demoManual.testManual()
    console.log('响应数据', res)
    // if (res.code && res.code == 500) {
    //   alert('下载失败请重试!')
    // }
    if (res) {
      downFilesManual(res)
    } else {
      alert('下载失败请重试!')
    }
  } catch (err) {
    arrBtnsManual.value[num - 1].value = '使用手册'
    alert('下载失败请重试!')
    console.error('请求失败:', err)
  }
}













</script>

<template>

  <Swiper :space-between="30" loop :centered-slides="true" :rewind="true" :autoplay="true" :pagination="{
    clickable: true
  }" :navigation="{
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }" :modules="modules" class="my-swiper">
    <SwiperSlide>
      <div class="w-full h-full banner1 flex justify-center items-center banner text-white">
        <div class="text-center max-w-80%">
          <div class="text-title">
            <img src="../../assets/home/top1.png" />
          </div>
          <img src="../../assets/home/top2.png" class="answer" />
          <div class="pt-10 flex justify-center items-center">
            <downClient></downClient>
            <a href="#" @click="down(1)" style="display: none;"
              class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 
              font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">{{
                text1 }}</a>
            <a href="https://dq10uiy9if5.feishu.cn/wiki/space/7502696670308663299?ccm_open_type=lark_wiki_spaceLink&open_tab_from=wiki_home"
              target="_blank"
              class="text-white hover:text-primary-700 hover:b-#1d4ed8 b-solid b-1 ml-10 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 focus:outline-none dark:focus:ring-primary-800">{{
                textManual }}</a>
          </div>
        </div>
      </div>
    </SwiperSlide>
    <div style="display: none;">
      /** <SwiperSlide>
        <div class="w-full h-full banner2 flex justify-center items-center banner text-white">
          <div class="text-center max-w-80%">
            <div class="sm:text-4xl text-2xl">
              TranSketch智能方案设计
            </div>
            <div class="sm:text-3xl pt-1 text-xl">Intelligent Solution Design</div>
            <div class="sm:text-lg pt-3 text-xs">
              智能方案实现无缝对接二维绘图软件，实现CAD与SU信息无缝转换保证一致性，满足设计师方案平面户型智能填色、家具智能布置、户型指标测算等，实时、高效、便捷提供设计师方案规范校验结果，保证建筑方案合规，让AI更懂设计，实现方案数字化。
            </div>
            <div class="pt-10">
              <a href="#" @click="down(2)"
                class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 
              font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">{{
                text2 }}</a>
              <a href="https://accounts.feishu.cn/accounts/page/login?app_id=2&no_trap=1&query_scope=all&redirect_uri=https%3A%2F%2Fdq10uiy9if5.feishu.cn%2Fwiki%2FN1TQwhNLIiVmdwkCb1YccavRnGb%3FfromScene%3DspaceOverview%26login_redirect_times%3D1"
                target="_blank"
                class="text-white hover:text-primary-700 hover:b-#1d4ed8 b-solid b-1 ml-10 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 focus:outline-none dark:focus:ring-primary-800">使用手册</a>
            </div>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="w-full h-full banner3 flex justify-center items-center banner text-white">
          <div class="text-center max-w-80%">
            <div class="sm:text-4xl text-2xl">
              TranSketch智能方案设计
            </div>
            <div class="sm:text-3xl pt-1 text-xl">Intelligent Solution Design</div>
            <div class="sm:text-lg pt-3 text-xs">
              智能方案实现无缝对接二维绘图软件，实现CAD与SU信息无缝转换保证一致性，满足设计师方案平面户型智能填色、家具智能布置、户型指标测算等，实时、高效、便捷提供设计师方案规范校验结果，保证建筑方案合规，让AI更懂设计，实现方案数字化。
            </div>
            <div class="pt-10">
              <a href="#" @click="down(3)"
                class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 
              font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">{{
                text3 }}</a>
              <a href="https://accounts.feishu.cn/accounts/page/login?app_id=2&no_trap=1&query_scope=all&redirect_uri=https%3A%2F%2Fdq10uiy9if5.feishu.cn%2Fwiki%2FN1TQwhNLIiVmdwkCb1YccavRnGb%3FfromScene%3DspaceOverview%26login_redirect_times%3D1"
                target="_blank"
                class="text-white hover:text-primary-700 hover:b-#1d4ed8 b-solid b-1 ml-10 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 focus:outline-none dark:focus:ring-primary-800">使用手册</a>
            </div>
          </div>
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div class="w-full h-full banner4 flex justify-center items-center banner text-white">
          <div class="text-center max-w-80%">
            <div class="sm:text-4xl text-2xl">
              TranSketch智能方案设计
            </div>
            <div class="sm:text-3xl pt-1 text-xl">Intelligent Solution Design</div>
            <div class="sm:text-lg pt-3 text-xs">
              智能方案实现无缝对接二维绘图软件，实现CAD与SU信息无缝转换保证一致性，满足设计师方案平面户型智能填色、家具智能布置、户型指标测算等，实时、高效、便捷提供设计师方案规范校验结果，保证建筑方案合规，让AI更懂设计，实现方案数字化。
            </div>
            <div class="pt-10">
              <a href="#" @click="down(4)"
                class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300
               font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">{{
                text4 }}</a>
              <a href="https://accounts.feishu.cn/accounts/page/login?app_id=2&no_trap=1&query_scope=all&redirect_uri=https%3A%2F%2Fdq10uiy9if5.feishu.cn%2Fwiki%2FN1TQwhNLIiVmdwkCb1YccavRnGb%3FfromScene%3DspaceOverview%26login_redirect_times%3D1"
                target="_blank"
                class="text-white hover:text-primary-700 hover:b-#1d4ed8 b-solid b-1 ml-10 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 focus:outline-none dark:focus:ring-primary-800">使用手册</a>
            </div>
          </div>
        </div>
      </SwiperSlide>*/
    </div>

    <div class="swiper-button-prev" slot="container-start"></div>
    <div class="swiper-button-next" slot="container-end"></div>
  </Swiper>
</template>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  margin-top: 60px;
  height: calc(100vh - 60px);
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner1 {
  background: url(../../assets/home/toutubanner.jpg);
}

.banner2 {
  background: url(../../assets/home/banner2.png);
}

.banner3 {
  background: url(../../assets/home/banner3.png);
}

.banner4 {
  background: url(../../assets/home/banner4.png);
}

.banner {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.my-swiper {
  :deep(.swiper-pagination-bullet) {
    width: 13px;
    height: 6px;
    display: inline-block;
    background: #b3b2b2;
    opacity: .2;
    margin: 0 5px;
    border-radius: 20px;
    transition: opacity .5s, background-color .5s, width .5s;
    transition-delay: .5s, .5s, 0s;
  }

  :deep(.swiper-pagination-bullet-active) {
    opacity: 1;
    background: #b3b2b2;
    width: 60px;
    transition-delay: 0s;
  }

  :deep(.swiper-button-next),
  :deep(.swiper-button-prev) {
    opacity: 0;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  :deep(.swiper-button-next)::after,
  :deep(.swiper-button-prev)::after {
    font-size: 20px;
    color: #000;
  }

  &:hover {

    :deep(.swiper-button-next),
    :deep(.swiper-button-prev) {
      opacity: 0.7;
    }
  }
}

.text-title {
  display: flex;
  align-items: center;
}




.answer {
  margin-top: 40px;
}
</style>
